<template>
    <div style="background-color:azure;">
        <h3>房价计划列表</h3>
        <input type="button" value="增加" class="btn btn-primary" @click="add">
        <input type="button" value="导出" class="btn btn-warning" @click="daochu">
        <hr>
        <input type="text" v-model="can.name">
        <input type="button" value="查询" @click="show" class="btn btn-success">
        <input type="button" class="btn btn-danger" value="批量删除" @click="delall">
        <input type="button" class="btn btn-link" value="批量上架" @click="updall(1)">
        <input type="button" class="btn btn-link" value="批量下架" @click="updall(0)">


        <table class="table table-bordered">
            <tbody>
                <tr style="background-color: aqua;">
                    <td>
                        <input type="checkbox" @click="headall" v-model="checked">
                    </td>
                    <td>房价计划名称</td>
                    <td>门店</td>
                    <td>房型</td>
                    <td>房型价格</td>
                    <td>数量</td>
                    <td>状态</td>
                    <td>早餐数量</td>
                    <td>开始时间</td>
                    <td>结束时间</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" style="background-color: bisque;">
                    <td>
                        <input type="checkbox" @change="bodyall" v-model="ids" :value="item.Id">
                    </td>
                    <td>{{ item.HousePriceName }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>￥{{ item.Price.toFixed(2) }}</td>
                    <td>{{ item.Count }}</td>
                    <td>
                        <span v-if="item.State==1" style="color: red;">上架</span>
                        <span v-if="item.State==0" style="color: chartreuse;">下架</span>
                    </td>
                    <td>{{ item.BreakFastCount }}</td>
                    <td>{{ moment(item.BeginTime).format("YYYY-MM-DD") }}</td>
                    <td>{{ moment(item.EndTime).format("YYYY-MM-DD") }}</td>
                    <td>
                        <input type="button" value="删除" @click="del(item.Id)" class="btn btn-danger">
                        <input type="button" v-if="item.State==0" value="上架" @click="upd(item.Id,1)" class="btn btn-warning">
                        <input type="button" v-if="item.State==1" value="下架" @click="upd(item.Id,0)" class="btn btn-warning">
                        <input type="button" value="修改" @click="updhouseprice(item.Id)" class="btn btn-success">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div style="background-color:cornsilk;">
        <span>共<b>{{ data.totalCount }}</b>条</span>
        <span>共<b>{{ data.totalPage }}</b>页</span>
        <span>当前第<b> {{ can.pageIndex }}/{{ data.totalPage }}</b>页</span>
        <select v-model="can.pageSize" @change="show">
            <option :value="item" v-for="item in ye">每页{{ item }}条</option>
        </select>
        <input type="button" value="首页" class="btn btn-link" @click="gopage(1)">
        <input type="button" value="上一页" class="btn btn-link" @click="gopage(can.pageIndex - 1)">

        <span @click="gopage(item)" v-for="item in data.totalPage">{{ item }}</span>

        <input type="button" value="下一页" class="btn btn-link" @click="gopage(can.pageIndex + 1)">
        <input type="button" value="尾页" class="btn btn-link" @click="gopage(data.totalPage)">
        <input type="text" v-model="can.pageIndex">
        <input type="button" value="跳转" @click="gopage(can.pageIndex)" class="btn btn-warning">
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, useSlots } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
import axios from 'axios';
import { textChangeRangeNewSpan } from 'typescript';
const route = useRoute();
const router = useRouter();

let checked = ref();
let ids = ref([]);
let ye: any = ref([2, 4, 6, 8, 10])

let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0
})
let can: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    name: ""
})


onMounted(() => {
    GetHousePricePlan();
})
const daochu=()=>{
    location.href=`https://localhost:7035/api/House/Dc`;
}


//修改
const updhouseprice=(id:any)=>{
    router.push({
        path:'/updHousePrice',
        query:{
            id:id
        }
    })
}


//批量上架下架
const updall = (state:any) => {
    if (confirm('确定修改吗')) {
        axios({
            method: "put",
            url: "/api/House/Upd",
            params: {
                ids: ids.value.toString(),
                state:state
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('修改成功');
                    ids.value=[];
                    checked.value=""
                    GetHousePricePlan();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}
//批量上架下架
const upd = (id:any,state:any) => {
    if (confirm('确定修改吗')) {
        axios({
            method: "put",
            url: "/api/House/Upd",
            params: {
                ids: id,
                state:state
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('修改成功');
                    ids.value=[];
                    checked.value=""
                    GetHousePricePlan();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}
//批量删除
const delall = () => {
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/House/del",
            params: {
                ids: ids.value.toString()
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('删除成功');
                    ids.value=[];
                    checked.value=""
                    GetHousePricePlan();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}
//删除
const del=(id:any)=>{
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/House/del",
            params: {
                ids: id
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('删除成功');
                    ids.value=[];
                    checked.value=""
                    GetHousePricePlan();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

//翻页
const gopage = (num: any) => {
    if (num < 1) {
        can.pageIndex = 1
        return;
    }
    if (num > data.totalPage) {
        can.pageIndex = data.totalPage;
        return;
    }
    can.pageIndex = num;
    GetHousePricePlan();
    return;
}
const show = () => {
    can.pageIndex = 1;
    GetHousePricePlan();
}


//获取房型房价列表
const GetHousePricePlan = () => {
    axios({
        method: "get",
        url: "/api/House/ShowPricePlan",
        params: can
    })
        .then(res => {
            data.list = res.data.list;
            data.totalCount = res.data.totalCount;
            data.totalPage = res.data.totalPage;
        })
        .catch(err => {
            console.log(err);
        })
}

//添加
const add = () => {
    router.push('/housePriceAdd')
}
//全选
const headall = () => {
    checked.value = !checked.value
    if (checked.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    }
    else {
        ids.value = [];
    }
}
//反选
const bodyall = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}
</script>






<style scoped>
b {
    color: red;
}

input {
    margin: 0 7px;
}

span {
    margin: 0 7px;
}
</style>